<template>
    <draggable
        v-bind="dragOptions"
        :group="groupName"
        tag="div"
        class="item-container"
        :list="list"
        :value="value"
        @input="emitter"
        @end="end"
        @add="add"
        @sort="sort"
    >
        <div class="item-group" ref="group" :style="customStyle(el)" :key="el.id" v-for="el in realValue">
            <div class="item-group-content">
                <div class="item">{{ el.name }}</div>
                <nested-test :data-gridkey="el.id" :item="el" :list="el.children" @end="end" :level="level + 1" />
                <div class="drag-bar">
                    <FontIcon icon-name="el-icon-menu"></FontIcon>
                </div>
                <div class="resize-bar" @mousedown="resizeDown"></div>
            </div>
        </div>
    </draggable>
</template>

<script>
import draggable from "vuedraggable";

export default {
    name: "nested-test",
    components: {
        draggable
    },
    props: {
        level: {
            required: false,
            type: Number,
            default: 1
        },
        group: {
            required: false,
            type: String,
            default: null
        },
        value: {
            required: false,
            type: Array,
            default: null
        },
        list: {
            required: false,
            type: Array,
            default: null
        },
        item: {
            type: Object
        }
    },
    data() {
        return {
            moveing: false,
            start: {
                x: 0,
                y: 0,
                width: 0,
                height: 0
            },
            tag: {
                width: 0,
                height: 0,
            }
        }
    },
    computed: {
        dragOptions() {
            return {
                animation: 200,
                disabled: false,
                ghostClass: "ghost",
                handle: ".drag-bar",
            };
        },
        // this.value when input = v-model
        // this.list  when input != v-model
        realValue() {
            return this.value ? this.value : this.list;
        },
        groupName() {
            return this.level === 1 ? this.group : this.level === 2 ? 'grid' : null
        },
        // customStyle() {
        //     return {width: this.item ? `${this.item.width}px` : null, height: this.item ? `${this.item.height}px` : null}
        // }
    },
    created() {
    },
    beforeDestroy() {
        document.removeEventListener('mousemove', this.resizeMove, false)
        document.removeEventListener('mouseup', this.resizeUp, false)
    },
    methods: {
        customStyle(el) {
            return {width: el ? `${el.width}px` : null, height: el ? `${el.height}px` : null}
        },
        emitter(value) {
            this.$emit("input", value);
        },
        add(e) {
            console.log('add', e.target.getAttribute('data-gridkey'))
            this.$emit("add", e, this.item)
        },
        end(e) {
            this.$emit("end", e, this.item);
        },
        sort(e) {
            console.log('sort', e)
            this.$emit("sort", e, this.item);
        },
        resizeDown(e) {
            if(!this.moveing) {
                document.removeEventListener('mousemove', this.resizeMove, false)
                document.removeEventListener('mouseup', this.resizeUp, false)
                console.log('down', e);
                let parent = this.$refs.group.find(v => v.contains(e.target));
                this.start.x = e.clientX;
                this.start.y = e.clientY;
                this.start.width = parent.offsetWidth;
                this.start.height = parent.offsetHeight;
                document.addEventListener('mousemove', this.resizeMove, false)
                document.addEventListener('mouseup', this.resizeUp, false)
                this.moveing = true;
            }
        },
        resizeMove(e) {
            if(this.moveing) {
                this.$refs.group.forEach(v => {
                    if(v.contains(e.target)) {
                        console.log(1);
                        let w = e.clientX - this.start.x + this.start.width;
                        let h = e.clientY - this.start.y + this.start.height;
                        v.style.width = w + 'px';
                        v.style.height = h + 'px';
                        this.tag.width = w;
                        this.tag.height = h;
                    }
                })
            }
        },
        resizeUp(e) {
            if(this.moveing) {
                console.log('up', e);
                document.removeEventListener('mousemove', this.resizeMove, false)
                document.removeEventListener('mouseup', this.resizeUp, false)
                this.moveing = false;
            }
        }
    },
}
</script>

<style scoped>
.item-container {
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.item {
    background-color: #fefefe;
}
.item-group{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    border: 1px solid #0094ff;
    position: relative;
    vertical-align: top;
}
.item-group-content{
    box-sizing: border-box;
    padding: 20px;
}
.drag-bar{
    position: absolute;
    top: 5px;
    right: 5px;
}
.resize-bar{
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
}
</style>